<template>
  <div class="container">
    <div class="lunar">
      <h3>{{ data.lunar }}</h3>
      <p class="year">{{ data.lunarYear }}年 {{ data.animalsYear }}</p>
    </div>
    <div class="tips">
      <p><span class="suit">宜</span> {{ data.suit }}</p>
      <p><span class="avoid">忌</span> {{ data.avoid }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

import axios from 'axios'; // npm install axios
const d = new Date();
const year = d.getFullYear();
const month = d.getMonth() + 1;
const day = d.getDate();
const today = ref(`${year}-${month}-${day}`);

const data = ref({
  lunar: '',
  animalsYear: '',
  lunarYear: '',
  suit: '',
  avoid: '',
});

// 基本参数配置
const apiUrl = '/api/calendar/day'; // 接口请求URL
const apiKey = 'f304f7b4da334d7ae7a188becfe4ce24'; // 在个人中心->我的数据,接口名称上方查看

// 接口请求入参配置
const requestParams = {
  key: apiKey,
  date: today.value,
};

// 发起接口网络请求
axios
  .get(apiUrl, {
    params: requestParams,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded', // 聚合API通常需要这个header
    },
  })
  .then((response) => {
    // 解析响应结果
    if (response.status === 200) {
      const responseData = response.data.result.data;

      // 网络请求成功。可依据业务逻辑和接口文档说明自行处理。
      console.log(responseData);

      //获取数据
      data.value.lunar = responseData.lunar;
      data.value.animalsYear = responseData.animalsYear;
      data.value.lunarYear = responseData.lunarYear;
      data.value.suit = responseData.suit;
      data.value.avoid = responseData.avoid;
    } else {
      // 网络异常等因素，解析结果异常。可依据业务逻辑自行处理。
      console.log('请求异常');
    }
  })
  .catch((error) => {
    // 网络请求失败，可以根据实际情况进行处理
    console.log('网络请求失败:', error);
  });
</script>

<style scoped>
.container {
  display: flex;
  align-items: center;
  height: 60px;
  border-top: 1px solid #ccc;
  padding: 10px 20px;
}
.lunar {
  width: 140px;
  height: 60px;
}
h3 {
  height: 30px;
  line-height: 30px;

  font-size: 18px;
}
.year {
  height: 20px;
  line-height: 20px;
  font-weight: 700;
}
.tips {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;

  height: 60px;
}
.suit {
  display: inline-block;
  width: 16px;
  height: 16px;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  color: white;
  background-color: #f00;
  border-radius: 3px;
}
.avoid {
  display: inline-block;
  width: 16px;
  height: 16px;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  color: white;
  background-color: #000;
  border-radius: 3px;
}
.tips p {
  font-size: 12px;
}
</style>
